<!-- shoublog中点击跳转到singleblog单个博客展示 -->
<template>
  <div id="single-blog">
    <h1>{{ blog.title }}</h1>
    <article>{{ blog.content }}</article>
    <p>作者:{{ blog.author }}</p>
    <p>分类:</p>
    <ul>
      <li v-for="category in blog.categories">
        {{ category }}
      </li>
    </ul>
    <button @click="deleteSingleBlog()">删除</button>
    <router-link :to="'/edit/' + id" class="edt" exact>编辑</router-link>
  </div>
</template>
<!-- 点击一个title,获得一个id跳转,路由参数id -->
<!-- localhost:8080/blog/id,通过路由id展示内容 -->
<!-- 从showblog里面拿到id值,单独展示一个blog -->
<script>
export default {
  name: 'single-blog',
  data() {
    return {
      //1点击title可以拿到params.id
      id: this.$route.params.id,
      blog: {},
    };
  },
  created() {
    this.$http
      .get('https://vuedemo-5710a-default-rtdb.firebaseio.com/posts/' + this.id + '.json')
      .then(function (data) {
        //2通过展示内容
        // this.blog = data.body;
        // console.log(data);
        return data.json();
      })
      .then(function (data) {
        this.blog = data;
      });
  },
  // 很容易多到入一个axios
  // 删除博客
  methods: {
    deleteSingleBlog() {
      this.$http.delete('https://vuedemo-5710a-default-rtdb.firebaseio.com/posts/' + this.id + '.json').then(response => {
        this.$router.push({ path: '/' });
      });
    },
  },
};
</script>

<style lang="less" scoped>
#single-blog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: #eee;
  border: 1px dotted #aaa;
}
button {
  border-radius: 5px;
  border: 1px solid #aaa;
  padding: 5px 7px;
}
.edt {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 5px 7px;
  margin-left: 15px;
  border-radius: 5px;
  border: 1px solid #aaa;
  font-size: 13px;
  text-align: center;
}
</style>
